<template>
	<uni-header title="地址详情"></uni-header>
	<view class="from">
		<!-- <view class="item">
			<text class="label">持卡人姓名</text>
			<input type="text" v-model="name" placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">开户银行</text>
			<input type="text" v-model="bankName" placeholder="请输入" />
		</view> -->
		<view class="item">
			<text class="label">提现地址</text>
			<input type="text" v-model="bankCardNo" placeholder="请输入" />
		</view>
		<!-- <view class="item">
			<text class="label">开户支行</text>
			<input type="text" v-model="bankBranch" placeholder="请输入" />
		</view> -->
		<view class="item">
			<text class="label">手机号</text>
			<input type="text" v-model="user.mobile" disabled placeholder="请输入" />
		</view>
		<view class="item">
			<text class="label">验证码</text>
			<input type="text" v-model="code" placeholder="请输入" />
			<text class="code" @click="getCode">{{codeText}}</text>
		</view>
		<view class="item-default">
			<text v-if="isdel==0" class="radio" @click="isdel=1"></text>
			<image v-if="isdel==1" src="../../static/radio.png" @click="isdel=0" mode=""></image>
			<text class="label">设为默认地址</text>

		</view>
	</view>
	<button class="submit" @click="submit">提交</button>
</template>

<script setup>
	import {
		bankSave,
		sendCode,
		bankInfo
	} from '@/util/api.js'
	import {
		onMounted,
		ref
	} from "vue";
	const user = uni.getStorageSync('user')
	const props = defineProps(['id'])
	onMounted(()=>{
		getBankInfo()
	})
	const isdel = ref(0)
	const name = ref('昆山支行2')
	const bankName = ref('招商银行2')
	const bankCardNo = ref()
	const bankBranch = ref('昆山支行2')
	const code = ref()
	const codeText = ref("获取验证码")
	let bok = true
	let second = 60
	const getBankInfo = async ()=>{
		if(props.id){
			const result = await bankInfo(props.id)
			name.value =result.data.name 
			bankName.value =result.data.bankName 
			bankCardNo.value =result.data.bankCardNo 
			bankBranch.value =result.data.bankBranch 
		}
	}
	const getCode = async() => {
		if (!bok) return false;
		const result = await sendCode({phone:user.mobile})
		bok = false;
		let timer = setInterval(() => {
			second--
			codeText.value = `${second}秒后重试`
			if (second <= 0) {
				bok = true
				codeText.value = "重新获取"
				second = 60
				clearInterval(timer)
			}
		}, 1000)
	}
	const submit = async () => {
		// if(!name.value){
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请输入持卡人姓名"
		// 	})
		// 	return false
		// }
		// if(!bankName.value){
			
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请输入开户银行"
		// 	})
		// 	return false
		// }
		if(!bankCardNo.value){
			uni.showToast({
				icon:"none",
				title:"请输入提现地址"
			})
			return false
		}
		// if(!bankBranch.value){
		// 	uni.showToast({
		// 		icon:"none",
		// 		title:"请输入开户支行"
		// 	})
		// 	return false
		// }
		if(!code.value){
			uni.showToast({
				icon:"none",
				title:"请输入验证码"
			})
			return false
		}
		const result = await bankSave({
			name:name.value,
			bankName:bankName.value,
			bankCardNo:bankCardNo.value,
			bankBranch:bankBranch.value,
			code:code.value,
			id:props.id,
			isDel:isdel.value
		})
		uni.navigateBack()
		
	}
</script>

<style lang="scss" scoped>
	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #1E53E7;
		border-radius: 16rpx;
		position: absolute;
		bottom: 68rpx;
		left: 32rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}

	.from {
		width: 686rpx;
		display: block;
		margin: 0 auto;

		.item-default {
			width: 686rpx;
			height: 128rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F2F4FA;
			.radio{
				width: 38rpx;
				height: 38rpx;
				display: block;
				border-radius: 50%;
				border: 1rpx solid #ccc;
				margin-right: 15rpx;
			}
			image{
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
			text {
				display: block;
				color: #181D29;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				line-height: 48rpx;
			}
		}

		.item {
			width: 686rpx;
			height: 128rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F4FA;

			input {
				flex: 2;
				display: block;
				height: 100%;
				// width: ;
			}

			.label {
				display: block;
				color: #181D29;
				font-size: 32rpx;
				width: 208rpx;
				display: flex;
				align-items: center;
				line-height: 48rpx;
			}

			.label::before {
				content: '*';
				color: #F53B47;
				display: block;
				font-size: 32rpx;
				line-height: 48rpx;
			}

			.code {
				display: block;
				color: #1E53E7;
				font-size: 32rpx;

			}

		}
	}
</style>